<template>
	<view class="container">
		<view class="list" v-for="item in CountyList" @click="Open(item)">
			<view class="icon" :style="'background-color:'+item.Color">{{item.Name.First()}}</view>
			<view class="name">{{item.Name}}</view>
		</view>
		<view class="dialog" v-if="Show">
			<view class="meng" @click="Close()"></view>
			<view class="sheet">
				<view class="li border-b" @click="Skip()">数据报表</view>
				<view class="li" @click="CaseList()">案件列表</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Show:false,
				Item:{},
				CountyList:[]
			};
		},
		onLoad() {
			this.Find_CountyList();
		},
		methods:{			
			Open(Item){
				if(Item.Domain==''){
					this.Util.Toast("该县区暂未上线系统");
				}else{
					this.Item=Item;
					this.Show=true;
				}
			},
			Close(){
				this.Show=false;
			},
			Skip(){
				this.Show=false;
				if(this.Item.Domain==''){
					this.Util.Toast("该县区暂未上线系统");
				}else{
					uni.navigateTo({
						url:'webview?Domain='+this.Item.Domain + '&Name='+this.Item.Name
					})
				}
			},
			CaseList(){
				this.Show=false;
				uni.navigateTo({
					url:'/pages/case_county/casesearchlist?Domain='+this.Item.Domain + '&Name='+this.Item.Name
				})
			},
			Find_CountyList(){
				var data={};
				data.Act="Find_CountyList";
				this.Util.Loading("加载中...");
				this.Util.Post(data, json=>{
					this.Util.HideLoading();
					uni.stopPullDownRefresh();
					this.CountyList= json.Data.CountyList;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding-top:20rpx;
		.list{width:210rpx; height:300rpx; margin-left:30rpx; margin-top:30rpx;
			.icon{width:210rpx; height:210rpx; line-height: 210rpx; border-radius: 50rpx; font-size:90rpx; text-align: center; color:#ffffff;}
			.name{width:210rpx; height:80rpx; line-height: 80rpx; text-align: center; font-size:40rpx;}
		}
		.dialog{width:100%; height:100vh;position: relative; 
			.meng{width:100vw; height: 100vh; background-color: #000000; opacity: 0.6; position: fixed; left:0rpx; top:0rpx;}
			.sheet{width:400rpx; height:200rpx; top:calc(50vh - 100rpx); left:175rpx; position: fixed; border-radius:20rpx; overflow: hidden; background-color: #ffffff; z-index:99;
				.li{width:100%; height:100rpx; line-height: 100rpx; text-align: center; font-size:32rpx;}
				.li:active{background-color: #f2f2f2;}
			}
		}
	}
</style>
